<!--
 * @Description: Description
 * @Author: zhaojiansen
 * @Date: 2022-10-31 15:11:49
 * @LastEditors: zhaojiansen
 * @LastEditTime: 2022-12-01 15:16:36
-->
<template>
  <div class="page-wrap">
    <NormalForm :operateForm="queryForm" :formList="formList" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card">
      <div class="right-btn">
        <el-button v-has-permi="['wecom:tlp:add']" icon="el-icon-plus" style="background-color: #0f40f5" type="primary" @click="creatingMultimedias">新建欢迎语
        </el-button>
      </div>
      <div style="padding: 0 20px 20px 20px">
        <el-table v-loading="loading" :cell-style="rowStyle" :data="tableData" height="442px">
          <el-table-column align="center" label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column align="center" label="欢迎语名称" prop="welcomeName" :min-width="180" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="消息内容" prop="welcomeMsg" :min-width="200" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="关联员工" prop="userNames" :width="200">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.userNames && scope.row.userNames.length > 2" placement="top" trigger="hover">
                <template>
                  <div style="width:190px">
                    <el-tag v-for="(item, index) in scope.row.userNames" :key="index" style="margin-bottom: 4px">
                      {{ item }}
                    </el-tag>
                  </div>
                </template>
                <div slot="reference" class="set-content">
                  <el-tag v-for="(item, index) in scope.row.userNames" :key="index">
                    {{ item }}
                  </el-tag>
                </div>
              </el-popover>
              <div v-else>
                <el-tag v-for="(item, index) in scope.row.userNames" :key="index">
                  {{ item }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="生效时间" prop="startValidTime" :width="180">
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime" :width="180">
          </el-table-column>
          <el-table-column align="center" label="创建人" prop="createBy" width="170">
          </el-table-column>
          <el-table-column align="center" label="启动状态" prop="states" width="140">
            <template slot-scope="{ row, $index }">
              <el-switch v-model="row.states" v-has-permi="['wecom:tlp:state']" :active-value="0" :inactive-value="1" @change="switchChange(row, $index, $event)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="170">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleClick(scope.row)">详情
              </el-button>
              <el-button v-has-permi="['wecom:tlp:edit']" size="small" type="text" @click="editorWelcome(scope.row)">编辑
              </el-button>
              <el-button v-has-permi="['wecom:tlp:remove']" size="small" type="text" @click="dletewelcome(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
  </div>
</template>

<script>
import { createGreeting, deleteInterface, updateRuleStatus } from '@/api/createGreeting/createGreeting.js'

export default {
  name: 'createGreeting',
  data() {
    return {
      queryForm: {
        welcomeName: '',
        deptId: null,
        createCodeList: [],
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '欢迎语名称',
          value: '',
          prop: 'welcomeName',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: '',
        },
        {
          label: '创建人',
          value: '',
          prop: 'createCodeList',
          type: 'STAFF',
          emunName: '',
        },
      ],
      loading: true,
      queryCreateList: [],
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    // 状态修改
    switchChange(row, index, event) {
      if (Number(event) === 1) row.states = 0
      if (Number(event) === 0) row.states = 1
      let obj = {
        id: row.id,
        states: row.states,
      }
      updateRuleStatus(obj).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.createGreetingFn()
        }
      })
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.createGreetingFn();
    },
    createGreetingFn() {
      this.loading = true
      const data = {
        welcomeMsgTplType: '2',
        deptId: this.queryForm.deptId,
        userIds: this.queryForm.createCodeList + '',
        welcomeName: this.queryForm.welcomeName,
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      }
      createGreeting(data).then((res) => {
        this.tableData = res.rows || []
        this.total = res.total || 0
        this.tableData.forEach((item) => {
          item.startValidTime =
            item.startValidTime.slice(0, 10).split('-').join('-') +
            '-' +
            item.endValidTime.slice(0, 10).split('-').join('-')
          item.userNames = item.userNames.split(',')
        })
        this.loading = false
      })
    },
    handleReset() {
      this.queryForm = {
        welcomeName: '',
        deptId: null,
        createCodeList: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.createGreetingFn();
    },
    rowStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === '关联员工') {
        return 'color:#082aff'
      }
      if (row.column.label === '创建人') {
        return 'color:#082aff'
      }
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.createGreetingFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.createGreetingFn()
    },
    handleClick(row) {
      this.$router.push({
        path: 'messagedetails',
        query: {
          id: row.id,
          mediaId: row.mediaId,
        },
      })
    },
    editorWelcome(row) {
      this.$router.push({
        path: 'welcome',
        query: {
          id: row.id,
          mediaId: row.mediaId,
          operateFlag: 'EDIT'
        },
      })
    },
    dletewelcome(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteInterface(row.id).then((res) => {
          if (res.code === 200) {
            this.handleQuery()
            this.$message.success('删除成功!')
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    creatingMultimedias() {
      this.$router.push({
        path: 'createEditor',
        query: {
          operateFlag: 'ADD'
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/styles/base.scss';
.page-wrap{
  height: 100%;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
